<template>
<div>

    <el-cascader 
        ref="role" 
        v-model="roleValue" 
        :placeholder="placeholder" 
        :options="options" 
        :props="defaultProps"
        :disabled="disabled" 
        :clearable="clearable" 
        :filterable="filterable" 
        :show-all-levels="showAllLevels"
        :collapse-tags="collapseTags" 
        separator="/" 
        @change="closePanel">
    </el-cascader>
</div>
</template>

<script>
    import {
        queryTreeData
    } from '@/service/core/adminRegion';
    import {
        transformTozTreeFormat
    } from "@/utils/Tools";
    export default {
        name: 'selectAddr', // 地址选择组件
        props: {
            value: { // v-model绑定值
                type: [String, Array],
                default () {
                    return []
                }
            },
            label: { // 名称
                type: [String, Array],
                default () {
                    return []
                }
            },
            multiple: { // 是否多选
                type: Boolean,
                default: false
            },
            disabled: { // 是否禁用
                type: Boolean,
                default: false,
            },
            clearable: { // 是否可清除
                type: Boolean,
                default: true
            },
            filterable: { // 是否开启搜索
                type: Boolean,
                default: true
            },
            checkStrictly: { // 是否父子节点不关联
                type: Boolean,
                default: true
            },
            showAllLevels: { // 是否展示全路径
                type: Boolean,
                default: true
            },
            emitPath: {
                type: Boolean,
                default: false
            },
            typeCode: { // 区域显示层级 '1':省  '1,2':省市 '1,2,3':省市区  为空全显示
                type: String,
                default: ''
            },
            collapseTags: {
                type: Boolean,
                default: false
            },
            placeholder: String,
            status: {
                type: String,
                default: 'ACTIVE'
            }
        },
        components: {},
        data() {
            return {
                options: [],
            }
        },
        watch: {
            value(val) {
                if (!this.multiple) {
                    if (!val.length) {
                        this.roleName = [];
                    }
                } else {
                    if (val.length == 0) {
                        this.roleName = [];
                    }
                }
            },
        },
        computed: {
            roleValue: {
                get: function () {
                    if(!this.multiple) {
                        if(this.value.length) {
                            return this.value[0]
                        }
                        return ''
                    }
                    return this.value
                },
                set: function (val) {
                    if(this.multiple) {
                        this.$emit('input', val);
                    }else {
                        this.$emit('input', [val]);
                    }
                }
            },
            roleName: {
                get: function () {
                    return this.label
                },
                set: function (val) {
                    this.$emit("update:label", val);
                }
            },
            defaultProps() { // 组件属性
                return {
                    label: 'name',
                    value: 'id',
                    emitPath: this.emitPath,
                    checkStrictly: this.checkStrictly,
                    multiple: this.multiple,
                }
            }
        },
        created() {
            this.queryTreeClassList();
        },
        methods: {
            queryTreeClassList() { // 求助事项 查询
                let params = {
                    tenementId: '1',
                    status: this.status,
                    typeCodeIn: this.typeCode
                }
                queryTreeData(params).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (Array.isArray(data) && data.length) {
                            this.options = [...data];
                        } else {
                            this.options = [];
                        }
                    }
                })
            },
            getPathByKey(value, key, arr) { // 获取path 返回节点集合
                let temppath = [];
                try {
                    function getNodePath(node) {
                        temppath.push(node);
                        //找到符合条件的节点，通过throw终止掉递归
                        if (node[key] === value) {
                            throw ("GOT IT!");
                        }
                        if (node.children && node.children.length > 0) {
                            for (var i = 0; i < node.children.length; i++) {
                                getNodePath(node.children[i]);
                            }
                            //当前节点的子节点遍历完依旧没找到，则删除路径中的该节点
                            temppath.pop();
                        } else {
                            //找到叶子节点时，删除路径当中的该叶子节点
                            temppath.pop();
                        }
                    }
                    for (let i = 0; i < arr.length; i++) {
                        getNodePath(arr[i]);
                    }
                } catch (e) {
                    return temppath;
                }
            },
            closePanel(value) { // 单选模式下 选中数据关闭下拉面板
                console.log(value, 'value')
                if(this.multiple) {
                    if (value.length) {
                        let roleName = [];
                        value.forEach(item => {
                            let path = this.getPathByKey(item, 'id', this.options) || [];
                            console.log(path, 'path')
                            if(path.length) {
                                let names = path.map(item2 => item2.name).join('/');
                                roleName.push(names)
                            }
                        })
                        this.roleName = [...roleName];
                    } else {
                        this.roleName = [];
                        return []
                    }
                }else {
                    let path = this.getPathByKey(value, 'id', this.options) || [];
                    this.roleName = [path.map(item3 => item3.name).join('/')];
                }

                if (!this.multiple) {
                    if (this.$refs.role) {
                        this.$refs.role.toggleDropDownVisible(false);
                    }
                }
            },
        }
    }

</script>
